<template>
  <div class="app-container">
    <div class="tree-main">
      <el-tree
        class="tree"
        default-expand-all
        highlight-current
        :expand-on-click-node="false"
        :data="data"
        :props="defaultProps"
        @node-click="handleNodeClick"
      >
        <span slot-scope="{ node }" class="custom-tree-node">
          <span>
            <svg-icon
              style="font-size: 18px"
              :icon-class="node.childNodes.length > 0 ? 'wenjianjia' : 'a-shebei'"
            ></svg-icon>
            {{ node.label }}
          </span>
        </span>
      </el-tree>

      <div class="main">
        <el-form class="searchForm" :inline="true" :model="queryForm" label-width="80px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="入职时间">
                <el-date-picker
                  v-model="queryForm.enterdate1"
                  style="width: 140px"
                  type="date"
                  placeholder="开始时间"
                  end-placeholder="结束时间"
                  value-format="yyyy-MM-dd"
                  format="yyyy-MM-dd"
                >
                </el-date-picker>
                <span> - </span>
                <el-date-picker
                  v-model="queryForm.enterdate2"
                  style="width: 140px"
                  type="date"
                  placeholder="结束时间"
                  value-format="yyyy-MM-dd"
                  format="yyyy-MM-dd"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="编号">
                <el-input v-model="queryForm.employeecode" style="width: 220px"> </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="姓名">
                <el-input v-model="queryForm.name" style="width: 220px"> </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="离职时间">
                <el-date-picker
                  v-model="queryForm.leavedate1"
                  style="width: 140px"
                  type="date"
                  placeholder="开始时间"
                  end-placeholder="结束时间"
                  value-format="yyyy-MM-dd"
                  format="yyyy"
                >
                </el-date-picker>
                <span> - </span>
                <el-date-picker
                  v-model="queryForm.leavedate2"
                  style="width: 140px"
                  type="date"
                  placeholder="结束时间"
                  value-format="yyyy-MM-dd"
                  format="yyyy"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="状态">
                <el-select v-model="queryForm.status" placeholder="请选择" style="width: 220px" clearable>
                  <el-option label="在职" value="1"> 在职 </el-option>
                  <el-option label="离职" value="0"> 离职 </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="岗位名称">
                <el-input v-model="queryForm.dutyname" style="width: 220px"> </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item>
            <el-button type="info" @click="pageChange(1)">查询</el-button>
            <!-- <el-button type="info" :disabled="form.orgid == null" @click="onAdd">添加</el-button> -->
            <!-- <el-button type="info">数据导出</el-button> -->
          </el-form-item>
        </el-form>
        <el-table
          v-loading="loading"
          :data="tableData"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          height="450"
          stripe
          border
          style="width: 100%"
        >
          <!-- <el-table-column :resizable="false" label="操作" width="140" fixed>
            <template slot-scope="scope">
              <span class="edit-tooltip">
                <el-tooltip effect="dark" content="删除" placement="bottom">
                  <el-button type="text" @click="onDel(scope.row)">
                    <svg-icon style="fill: #f46c6c" icon-class="butongyi"></svg-icon>
                  </el-button>
                </el-tooltip>
                <el-tooltip effect="dark" content="修改" placement="bottom">
                  <el-button type="text" @click="onClickName(scope.row)">
                    <svg-icon style="fill: #f46c6c" icon-class="a-xiugai"></svg-icon>
                  </el-button>
                </el-tooltip>
                <el-tooltip effect="dark" content="变更部门" placement="bottom">
                  <el-button type="text" @click="onClickDepartment(scope.row)"> 变更部门 </el-button>
                </el-tooltip>
              </span>
            </template>
          </el-table-column> -->
          <el-table-column :resizable="false" prop="employeecode" label="编号" min-width="120" />
          <el-table-column :resizable="false" prop="name" label="姓名" min-width="100" />
          <el-table-column :resizable="false" prop="orgname" label="部门名称" min-width="120" />
          <el-table-column :resizable="false" prop="enterdate" label="入职时间" min-width="120" />
          <el-table-column :resizable="false" prop="leavedate" label="离职时间" min-width="120" />
          <el-table-column :resizable="false" prop="station" label="职务描述" min-width="100" />
          <el-table-column :resizable="false" prop="sex" label="性别" min-width="120" />
          <el-table-column :resizable="false" prop="idno" label="证件号" min-width="120" />
          <el-table-column :resizable="false" prop="brithday" label="出生日期" min-width="120" />
          <el-table-column :resizable="false" prop="mobileno" label="手机号" min-width="120" />
          <el-table-column :resizable="false" prop="telnum" label="座机" min-width="120" />
          <el-table-column :resizable="false" prop="address" label="住址" min-width="120" />
          <el-table-column :resizable="false" prop="status" label="状态" min-width="120">
            <template slot-scope="scope">
              {{ scope.row.status == '1' ? '在职' : '离职' }}
            </template>
          </el-table-column>
          <el-table-column :resizable="false" prop="dutyname" label="岗位名称" min-width="120" />
          <el-table-column :resizable="false" prop="email" label="邮箱" min-width="120" />
        </el-table>
      </div>
    </div>
    <el-pagination
      style="margin: 10px"
      :current-page="queryForm.pagenum"
      :page-sizes="[20, 50, 100]"
      :page-size="queryForm.pagesize"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="sizeChange"
      @current-change="pageChange"
    />
    <el-dialog
      destroy-on-close
      :title="title"
      :visible.sync="visible"
      :close-on-click-modal="false"
      width="1200px"
      @close="onClose"
    >
      <span>
        <el-form ref="form" :model="form" :rules="formRules" label-width="80px" :inline="false">
          <el-row :gutter="10">
            <el-col :span="8">
              <el-form-item label="编号" prop="employeecode">
                <el-input v-model="form.employeecode" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="名称" prop="name">
                <el-input v-model="form.name" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="入职时间" prop="enterdate">
                <el-date-picker
                  v-model="form.enterdate"
                  style="width: 100%"
                  type="date"
                  placeholder="入职时间"
                  value-format="yyyy-MM-dd"
                  format="yyyy-MM-dd"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="离职时间" prop="leavedate">
                <el-date-picker
                  v-model="form.leavedate"
                  style="width: 100%"
                  type="date"
                  placeholder="离职时间"
                  value-format="yyyy-MM-dd"
                  format="yyyy-MM-dd"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="8">
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="form.email" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="岗位" prop="dutyname">
                <el-input v-model="form.dutyname" disabled>
                  <el-button slot="append" type="info" icon="el-icon-zoom-in" @click="ClickGW(0)"></el-button>
                </el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="职务描述" prop="station">
                <el-input v-model="form.station" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="性别" prop="sex">
                <el-select v-model="form.sex" placeholder="请选择" clearable>
                  <el-option label="男" value="男"> 男 </el-option>
                  <el-option label="女" value="女"> 女 </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="8">
              <el-form-item label="证件号" prop="idno">
                <el-input v-model="form.idno" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="出生时间" prop="brithday">
                <el-date-picker
                  v-model="form.brithday"
                  style="width: 100%"
                  type="date"
                  placeholder="出生时间"
                  value-format="yyyy-MM-dd"
                  format="yyyy-MM-dd"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所属领队" prop="leadercode">
                <el-input v-model="form.leadercode" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="手机" prop="mobileno">
                <el-input v-model="form.mobileno" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="8">
              <el-form-item label="座机" prop="telnum">
                <el-input v-model="form.telnum" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="住址" prop="address">
                <el-input v-model="form.address" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="工作起始年" prop="startworkyear">
                <el-input v-model="form.startworkyear" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="本单位起始年" prop="workthisyear">
                <el-input v-model="form.workthisyear" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="8">
              <el-form-item label="状态" prop="status">
                <el-select v-model="form.status" placeholder="请选择">
                  <el-option label="在职" value="1">在职</el-option>
                  <el-option label="离职" value="0">离职</el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="兼职岗位" prop="otherdutyname">
                <el-input v-model="form.otherdutyname" disabled>
                  <el-button slot="append" type="info" icon="el-icon-zoom-in" @click="Clickcurr(1)"></el-button>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="兼职部门" prop="otherorgname">
                <el-input v-model="form.otherorgname" disabled>
                  <el-button slot="append" type="info" icon="el-icon-zoom-in" @click="Clickbm"></el-button>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="部门名称" prop="orgname">
                <el-input v-model="form.orgname" disabled> </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </span>
      <div slot="footer">
        <el-button type="info" @click="onSubmit">保存</el-button>
      </div>
    </el-dialog>
    <renyuangangwe :visibles="visibles" :idval="idval" @father="visibles = false" @onChoose="onChoose"></renyuangangwe>
    <renyuanbm :visiblesbm="visiblesbm" @fatherbm="visiblesbm = false" @onChoosebm="onChoosebm"></renyuanbm>
    <renyuanbgbm
      :visiblesbgbm="visiblesbgbm"
      @fatherbgbu="visiblesbgbm = false"
      @onChoosebgbm="onChoosebgbm"
    ></renyuanbgbm>
  </div>
</template>

<script>
import { QueryPageListAll, QueryPageList, Save, Del } from '@/api/settings/renyuan'
import renyuangangwe from './renyuandalog/renyuangangwe.vue'
import renyuanbm from './renyuandalog/renyuanbm.vue'
import renyuanbgbm from './renyuandalog/renyuanbgbm.vue'

export default {
  name: 'Renyuan',
  components: { renyuangangwe, renyuanbm, renyuanbgbm },
  data() {
    return {
      queryForm: {
        pagenum: 1,
        pagesize: 20
      },
      total: 0,
      tableData: [],
      loading: true,
      visible: false,
      title: '人员管理',
      formRules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        employeecode: [{ required: true, message: '请输入编号', trigger: 'blur' }]
      },
      form: {},
      // 树状结构数据
      data: [],
      // 树状结构显示修改
      defaultProps: {
        children: 'children',
        label: 'orgname'
      },
      gangwei: [
        '组长',
        '员工',
        '董事长',
        '副董事长',
        '董事',
        '总经济师',
        '系统管理员',
        '业务副总裁',
        '总工程师',
        '总法律顾问',
        '部门领导'
      ],
      idval: '',
      visibles: false,
      visiblesbm: false,
      visiblesbgbm: false,
      DepartmentData: []
    }
  },
  created() {
    this.onSearch()
    this.onSearchAll()
  },
  methods: {
    // 点击页面显示条数
    sizeChange(size) {
      this.queryForm.pagesize = size
      this.onSearch()
    },
    // 点击下一页与页码
    pageChange(page) {
      console.log(page)
      this.queryForm.pagenum = page
      this.onSearch()
    },
    // 获取树结构所有数据
    async onSearchAll() {
      const { content } = await QueryPageListAll({})
      console.log('获取树结构所有数据', content)
      var res = []
      content.forEach(item => {
        if (item.showname != null) {
          res.push(item)
        }
      })
      this.datas = res
      const result = this.turnData(content, '0')
      this.data = result
      console.log(this.datas)
    },
    // 树状结构数据转换
    turnData(arr, pid) {
      const res = []
      arr.forEach(item => {
        if (item.parentid == pid) {
          const children = this.turnData(arr, item.id)
          if (children.length > 0) {
            item.children = children
          }
          res.push(item)
        }
      })
      return res
    },
    // 查询列表
    async onSearch() {
      this.loading = true
      const list = await QueryPageList(this.queryForm)
      console.log('查询列表', list)
      this.tableData = list.content.list
      this.total = list.content.total
      this.loading = false
    },
    // 点击树状结构
    async handleNodeClick(data, index, event) {
      console.log(data)
      this.loading = true
      this.queryForm.orgid = data.id
      this.form.orgid = Number(data.id)
      this.form.orgname = data.orgname

      const { content } = await QueryPageList(this.queryForm)
      // const res = await QueryPageID({ id: data.id })
      console.log(content.list)
      this.tableData = content.list
      this.total = content.total
      this.loading = false
    },
    // 添加
    onAdd() {
      // console.log(new Date())
      // var time = this.$parseTime(new Date(), '{y}-{m}-{d}')
      // this.form.time = time
      // this.form.zuzhi = this.queryForm.zuzhi

      this.visible = true
    },
    // 保存
    onSubmit() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          await Save(this.form)
          if (this.form.id) {
            this.$message({
              type: 'success',
              message: '修改数据成功'
            })
          } else {
            this.$message({
              type: 'success',
              message: '添加数据成功'
            })
          }
          this.visible = false
          this.onSearch()
          this.onSearchAll()
        } else {
          return false
        }
      })
    },
    // 点击修改与变更
    onClickName(data) {
      console.log(data)
      this.visible = true
      this.form = data
    },

    onClose() {
      const bmid = this.form.orgid
      const name = this.form.orgname
      this.form = {}
      this.form.orgid = bmid
      this.form.orgname = name
    },
    // 删除
    onDel(data) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const del = await Del({ id: data.id })
          console.log(del)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.queryForm = {}
          this.onSearch()
          this.onSearchAll()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    Clickcurr(data) {
      this.visibles = true
      this.idval = data
    },
    Clickbm() {
      this.visiblesbm = true
    },
    ClickGW(data) {
      this.visibles = true
      this.idval = data
    },
    onClickDepartment(data) {
      this.DepartmentData = data
      this.visiblesbgbm = true
    },

    // 获取子组件穿回来的值
    onChoose(row) {
      console.log(row)
      if (row.v == '0') {
        this.form.dutyname = row.dutyname
        this.form.duty = row.id
      } else {
        this.form.otherdutyname = row.dutyname
      }
    },
    onChoosebm(row) {
      console.log(row)
      this.form.otherorgname = row.orgname
    },
    async onChoosebgbm(row) {
      const arr = {}
      arr.id = this.DepartmentData.id
      arr.orgid = row.id
      arr.employeecode = this.DepartmentData.employeecode
      const res = await Save(arr)
      console.log(res)
      this.onSearch()
      this.onSearchAll()
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  height: 30px;
  line-height: 30px;
  background: rgba(0, 0, 0, 0.3);
  font-size: 14px;
  text-transform: uppercase;
  margin: 0 0 5px;
  padding: 0 10px;
  display: inline-block;
  letter-spacing: 0.5px;
}

.tree-main {
  display: flex;
  height: 100%;

  .tree {
    width: 250px;
    // height: calc(100vh - 185px);
  }

  .main {
    width: calc(100% - 250px);
  }
}
</style>
